<template>
  <div id="login">
    <!-- 导航栏 -->
    <van-nav-bar title="登录" left-arrow @click-left="onClickLeft" />

    <!-- 中心logo -->
    <div class="logo_img">
      <img src="../assets/images/icon-kfc.png" alt />
      <div class="logo_text">肯 德 基</div>
    </div>

    <!-- 账号和密码 -->

    <van-form>
      <van-field
        v-model="loginUserInfo.user"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        autocomplete="off"
      />
      <van-field
        v-model="loginUserInfo.password"
        :type="passwordStatus ? 'password' : 'text'"
        name="密码"
        label="密码"
        placeholder="密码"
        :right-icon="passwordStatus ? 'closed-eye' : 'eye-o'"
        @click-right-icon="toggle('passwordStatus')"
      />

      <!-- 注册 -->
      <div class="regiest">
        <div>忘记密码</div>
        <div>|</div>
        <div @click="showReg">注册</div>
      </div>

      <!-- 登录 -->
      <div class="btn">
        <div style="margin: 16px">
          <van-button color="#fc3b3e" round block type="info" @click="login"
            >立即登录</van-button
          >
        </div>
      </div>
    </van-form>

    <!-- 注册弹窗 -->
    <div class="regiests">
      <van-popup v-model="show" round :close-on-click-overlay="false" closeable>
        <div class="user-regiest">用户登录</div>

        <div class="popup-reg">
          <van-form>
            <van-field
              v-model="regiestUserInfo.user"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              autocomplete="off"
            />
            <van-field
              v-model="regiestUserInfo.password"
               :type="passwordStatu ? 'password' : 'text'"
              name="密码"
              label="密码"
              placeholder="密码"
                :right-icon="passwordStatu ? 'closed-eye' : 'eye-o'"
              @click-right-icon="toggle('passwordStatu')"
            />
            <van-field
              v-model="regiestUserInfo.nickname"
              type="text"
              name="昵称"
              label="昵称"
              placeholder="请输入昵称"
            />
            <!-- 注册 -->
            <div class="btn">
              <div style="margin: 16px">
                <van-button
                  color="#fc3b3e"
                  @click="regiester"
                  round
                  block
                  type="info"
                  >注册</van-button
                >
              </div>
            </div>
          </van-form>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
// 导入文件
import { Toast } from "vant";
import { validForm } from "../assets/js/validForm.js";
export default {
  name: "Login",
  data() {
    return {
      // 是否显示弹窗,默认不显示
      show: false,
      // 注册用户信息
      regiestUserInfo: {
        user: "",
        password: "",
        nickname: "",
      },
      // 登录用户信息
      loginUserInfo: {
        user: "",
        password: "",
      },
      // 登录
      passwordStatus: true,
      // 注册
      passwordStatu:true,
    };
  },

  methods: {
    // 密码显示隐藏
    toggle(key) {
      // 取反
      this[key] = !this[key];
    },
    onClickLeft() {
      // 点击返回上一页
      this.$router.go(-1);
    },
    showReg() {
      // 改变弹窗状态   !false = true
      this.show = !this.show;
    },
    // 注册的方法
    regiester() {
      // 正则验证
      //构造表单验证信息  注册正则
      let o = {
        phone: {
          value: this.regiestUserInfo.user, //要验证的值
          errorMsg: "手机号格式不正确", //错误时候提示的信息
          reg: /^1[3-9]\d{9}$/, //正则规则
        },
        password: {
          value: this.regiestUserInfo.password,
          errorMsg: "密码由数字字母下划线组合(6-16字符)",
          reg: /^[A-Za-z]\w{5,15}$/,
        },
        nickName: {
          value: this.regiestUserInfo.nickname,
          errorMsg: "昵称由字母数字下划线汉字组合(1-10字符)",
          reg: /^[\w\u4e00-\u9fa5]{1,10}$/,
        },
      };

      // 验证通过的时候 isPass显示  true   不通过的时候显示的是false
      let isPass = validForm.valid(o);

      console.log(isPass);

      // 拦截  如果验证成功我才让你注册  不成功我拦截一下
      // 判断条件   false  !false = true
      if (!isPass) {
        // 终止后面的代码
        return;
      }

      //
      this.axios({
        // 请求的方式 get / post   get请求传递的参数用params
        // 如果post 传递参数使用data
        method: "get",
        // 请求的路径
        url: "/register",
        // 传递的参数
        params: this.regiestUserInfo
        // then 表示请求成功的时候才执行代码
        // catch表示 请求失败的时候才执行
      })
        .then((res) => {
          console.log("注册后的信息", res);
          // 可以判断咋们注册成功
          if (res.data.status == 200) {
            Toast(res.data.msg);

            // console.log("我测试我这里会不会执行");

            // 把原来窗口关闭
            this.show = false;
          }
        })
        .catch((err) => {});
    },
    //登录的方法
    login() {
      // 正则验证
      //构造表单验证信息
      let o = {
        phone: {
          value: this.loginUserInfo.user, //要验证的值
          errorMsg: "手机号格式不正确", //错误时候提示的信息
          reg: /^1[3-9]\d{9}$/, //正则规则
        },
        password: {
          value: this.loginUserInfo.password,
          errorMsg: "密码由数字字母下划线组合(6-16字符)",
          reg: /^[A-Za-z]\w{5,15}$/,
        },
      };

      // 验证通过的时候 isPass显示  true   不通过的时候显示的是false
      let isPass = validForm.valid(o);

      console.log(isPass);

      // 拦截  如果验证成功我才让你注册  不成功我拦截一下
      // 判断条件   false  !false = true
      if (!isPass) {
        // 终止后面的代码
        return;
      }

      //
      this.axios({
        // 请求的方式 get / post   get请求传递的参数用params
        // 如果post 传递参数使用data
        method: "get",
        // 请求的路径
        url: "/login",
        // 传递的参数
        params: this.loginUserInfo

        // then 表示请求成功的时候才执行代码
        // catch表示 请求失败的时候才执行
      })
        .then((res) => {
          console.log("登录后的信息", res);

          // 将返回的一个数据存储在本地数据里面   ('字段自己定义',存储的数据)
          // 会用来判断  用户是否已经登录的依据
          localStorage.setItem("token", res.data.data);
          this.$router.push({name:"Home"});

          // // 可以判断咋们注册成功
          // if(res.data.status==200){

          //   // console.log("我测试我这里会不会执行");

          //     // 把原来窗口关闭
          //     this.show = false;
          // }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="less" scoped>
.user-regiest {
  font-size: 20px;
  padding: 15px;
  font-weight: bold;
}
.popup-reg {
  width: 300px;
  height: 300px;
}

#login {
  // 导航条的左侧按钮
  .van-nav-bar .van-icon {
    color: #333;
    font-size: 22px;
  }
  // 导航条标题
  .van-nav-bar__title {
    color: #ff3b3b;
    font-weight: bold;
  }
  // 中心logo
  .logo_img {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 50px;
    img {
      width: 115px;
      height: 118px;
    }
    .logo_text {
      font-size: 22px;
      color: #aaa;
    }
  }

  // 注册的字体颜色
  .text {
    .van-button--info {
      color: black !important; //!important  两个同时修饰 不同颜色  但是我的黑色不生效,那么我加个权重给他  理解:两个打架,一个人打不过  抄武器(!important)
    }
  }
}

/deep/.van-nav-bar .van-icon {
  color: #e4393c;
}
.regiest {
  display: flex;
  position: absolute;
  right: 10px;
  margin-top: 10px;
}
.regiest div {
  margin-right: 5px;
}
.btn {
  margin-top: 40px;
}
</style>
